<template>
  <div>
    <div class="titleHead">
      <div class="leftNav">
        <div class="logoBox"><img
            id="logoStyle"
            src="@/assets/logo/tlogo.png"
            alt=""
          ></div>
        <p>透景生命远程支持中心</p>
      </div>
      <div class="rightNav">
        <ul class="navBtnBox">
          <li @click.stop="toHome">
            <i>&#xe8b3;</i>
            <span>首页</span>
          </li>
          <li @click.stop="toMaintain">
            <i class="icon">&#xe632;</i>
            <span>维护</span>
          </li>
          <li @click.stop="toFault">
            <i class="icon">&#xe633;</i>
            <span>故障</span>
          </li>
          <li
            @click.stop="toReagent"
          >
            <i class="icon">&#xe60f;</i>
            <span>试剂</span>
          </li>
          <li @click.stop="toInstrument">
            <i>&#xe616;</i>
            <span>仪器</span>
          </li>
          <span
            class="dataCenter"
            @click.stop="dataCenterLink"
          >数据中心 <i>&#xea5d;</i></span>

        </ul>
        <div class="headerBox">
          <div class="myHeader">
            <i>&#xe603;</i>
          </div>
        </div>
      </div>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import { instumentTypeList } from "@/request/api.js";
export default {
  name: "Home",
  mounted() {
    // this.autoToggle();
  },
  methods: {
    // autoToggle() {
    //   var i = 0;
    //   setInterval((e) => {
    //     console.log("取余是", i % 3);
    //     console.log("i是", i++);
    //     switch (i % 3) {
    //       case 0:
    //        this.toMaintain();
    //         break;
    //       case 1:
    //        this.toFault();
    //         break;
    //       case 2:
    //         this.toInstrument();
    //         break;
    //     }
    //   }, 20000);
    // },
    dataCenterLink() {
      this.$router.push("/tellgen/datacenter");
      this.$store.dispatch("areaCityQuest", []);
      instumentTypeList({
        page: this.$page,
        pageSize: this.$pageSize,
      })
        .then((res) => {
          console.log("仪器列表请求成功", res.data.rows);
          if (res.data.success) {
            var iList = [];
            for (var i = 0; i < res.data.rows.length; i++) {
              iList.push(res.data.rows[i].type);
            }
            localStorage.setItem("instrumentList", iList);
          } else {
            this.$message.error({
              message: res.data.errorMsg,
            });
          }
        })
        .catch((err) => {
          console.log("仪器列表请求失败", err);
        });
    },
    toHome() {
      this.$router.push("/tellgen/home");
    },
    toMaintain() {
      this.$router.push("/tellgen/maintain");
    },
    toFault() {
      this.$router.push("/tellgen/fault");
    },
    toReagent() {
      this.$router.push("/tellgen/reagent");
    },
    toInstrument() {
      this.$router.push("/tellgen/instrument");
    },
  },
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2700101 */
  src: url("//at.alicdn.com/t/font_2700101_w75sinr0ab.woff2?t=1631172721826")
      format("woff2"),
    url("//at.alicdn.com/t/font_2700101_w75sinr0ab.woff?t=1631172721826")
      format("woff"),
    url("//at.alicdn.com/t/font_2700101_w75sinr0ab.ttf?t=1631172721826")
      format("truetype");
}

.titleHead {
  width: 100%;
  height: 5.6rem;
  background-color: #11101e;
  display: flex;
  .leftNav {
    flex: 0.7;
    display: flex;
    align-items: center;
    p {
      font-size: 2rem;
    }

    .logoBox {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      display: inline;
      line-height: 3rem;
      margin-left: 4.7rem;
      margin-right: 1.8rem;
      text-align: center;
      #logoStyle {
        width: 100%;
        height: auto;
      }
    }
  }
  .rightNav {
    flex: 1;
    display: flex;
    .navBtnBox {
      flex: 1.8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .dataCenter {
        display: inline-block;
        width: 14rem;
        height: 3.7rem;
        background: #000000;
        border-radius: 3rem;
        margin-left: 4rem;
        text-align: center;
        line-height: 3.7rem;
        border: 0.1rem solid #eeeeee;
        i {
          font-family: "iconfont";
          font-style: normal;
        }
      }
      .dataCenter:hover {
        border: 0.1rem solid #61ffdd;
        color: #61ffdd;
        box-shadow: 0rem 0rem 1rem rgba(189, 255, 246, 0.8);
      }
      li {
        width: 11rem;
        height: 3.7rem;
        background-color: #11101e;
        border-radius: 0.6rem;
        border: 0.1rem solid #eeedfb;
        text-align: center;
        i {
          font-family: "iconfont"; /* Project id 2700101 */
          font-style: normal;
          margin-right: 1rem;
          font-size: 1.7rem;
          line-height: 3.6rem;
        }
        .icon {
          font-size: 2rem;
          line-height: 3.6rem;
        }
      }
      li:hover {
        border: 0.12rem solid #f1bbef;
        box-shadow: 0rem 0rem 1rem rgba(245, 208, 243, 0.8);
        i,
        span {
          color: #f1bbef;
        }
      }
    }
    .headerBox {
      flex: 0.25;
      display: flex;
      justify-content: center;
      align-items: center;
      .myHeader {
        width: 4.2rem;
        height: 4.2rem;
        background-color: #747579;
        border-radius: 50%;
        border: 0.1rem solid #acacac;
        text-align: center;
        line-height: 4.2rem;

        i {
          font-family: "iconfont"; /* Project id 2700101 */
          font-style: normal;
          font-size: 3rem;
          color: #aaaaaa;
        }
      }
      .myHeader:hover {
        background-color: #666867;
      }
    }
  }
}
</style>
